<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* 页面加载后v-cloak就消失了，元素也就正常显示了 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="root">
       <!-- 我们学过的指令
       v-bind:单向绑定解析表达式，简写为:xxx
       v-model:双向数据绑定
       v-for:遍历数组/对象/字符串
       v-on:绑定事件监听，简写为@
       v-if,v-else,v-else-if:条件渲染
       v-show:条件渲染 -->

       <!-- v-text向其所在标签添加文本,把所有文本都当成正常字符串解析,不会解析标签什么的 -->
       <!-- 与插值语法{{}}的区别是它会替换节点中的内容，{{}}不会 -->
       <h2>{{name}}</h2>
       <h2 v-text="name"></h2>
       <h2 v-text="con1"></h2>

       <hr>

       <!-- v-html,和v-text的区别是它支持结构的解析 -->
       <h2 v-html="name"></h2>
       <h2 v-html="con1"></h2>
      
       <!-- 在a标签里运行js代码要这样写 -->
       <!-- <a href = "javascript:console.log(document.cookie)">文本</a>解析代码会带来安全隐患，这是个a标签</a> -->
       <!-- 解析代码会带来安全隐患，这是个a标签,要在可信的内容上使用，不要再用户提交上使用 -->
       <h2 v-html="con2"></h2>


       <hr>
       <!-- v-cloak指令,这个指令会在页面加载后消失，消失了有啥用呢？在vue加载中，如果网速太慢页面会出现这种情况{{name}} -->
       <!-- 就是vue还没加出来，{{}}这个解析不了，所以我们使用style和v-cloak配合 -->
       <h2 v-cloak>{{name}}</h2>


       <hr>
       <hr>
       <!-- v-once指令，会让当前节点在第一次渲染后变成静态内容，以后再也不渲染了 -->
       <h2 v-once>n最开始是{{n}}</h2>
       <h2>当前n值是{{n}}</h2>
       <button @click="n++">点击n加一</button>
       <hr>
       <hr>

       <!-- v-pre指令，可以跳过该节点的编译过程 -->
       <h2 v-pre>{{name}}</h2>





    </div>
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
           name:'展示文本',
           con1:'<h3>哈哈哈</h3>',
           con2:'<a href = "javascript:console.log(document.cookie)">解析代码会带来安全隐患，这是个a标签</a>',
           n:1
        }
    })
</script>
</html>